<template>
	<view>
		<uNavbar title="团队战力风云榜" rightText="切换个人" @rightClick="goTagglePage"></uNavbar>
		<!-- 前三 -->
		<view class="fighting_box flex_ld" v-if="itemobj2">
			<view class="fighting  flex_ZC" @click="goPageNext(itemobj2.id)">
				<view class="fighting_top flex_ZC">
					<image class="rankings" src="../../static/icon/i_ph2.png" mode=""></image>
					<image class="user_img" :src="itemobj2.team_logo" mode="aspectFill"></image>
				</view>
				<view class="flex_ZC">
					<text class="f30">{{itemobj2.team_name}}</text>
					<text class="f24 grade">等级：{{itemobj2.team_level_format}}</text>
					<view class="zhan flex_dq">
						<image src="../../static/icon/i_zl.png" mode=""></image>
						<text class="f30">{{itemobj2.team_ce}}</text>
					</view>
				</view>
			</view>

			<view class="fighting  flex_ZC"  v-if="itemobj1">
				<view class="fighting_top flex_ZC first" @click="goPageNext(itemobj1.id)">
					<image class="rankings" src="../../static/icon/i_ph.png" mode=""></image>
					<image class="user_img" :src="itemobj1.team_logo" mode="aspectFill"></image>
				</view>
				<view class=" flex_ZC">
					<text class="f30">{{itemobj1.team_name}}</text>
					<text class="f24 grade">等级：{{itemobj1.team_level_format}}</text>
					<view class="zhan flex_dq">
						<image src="../../static/icon/i_zl.png" mode=""></image>
						<text class="f30">{{itemobj1.team_ce}}</text>
					</view>
				</view>
			</view>
			<view class="fighting  flex_ZC"  v-if="itemobj3">
				<view class="fighting_top flex_ZC" @click="goPageNext(itemobj3.id)">
					<image class="rankings" src="../../static/icon/i_ph3.png" mode=""></image>
					<image class="user_img" :src="itemobj3.team_logo" mode="aspectFill"></image>
				</view>
				<view class="flex_ZC">
					<text class="f30">{{itemobj3.team_name}}</text>
					<text class="f24 grade">等级：{{itemobj3.team_level_format}}</text>
					<view class="zhan flex_dq">
						<image src="../../static/icon/i_zl.png" mode=""></image>
						<text class="f30">{{itemobj3.team_ce}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="ranking_box">
			<view class="ranking flex_dq" v-for="(item,index) in rankingList" :key="item.id" @click="goPageNext(item.id)">
				<text class="f36 c0">{{index +4}}</text>
				<view class="ranking_r flex_dq">
					<image :src="item.team_logo" mode="aspectFill"></image>
					<view class="ranking_r_user flex_Z">
						<text class="f30 c0">{{item.team_name}}</text>
						<text class="f24 grade">等级：{{item.team_level_format}}</text>
					</view>
					<view class="zhans flex_dq">
						<image src="../../static/icon/i_zl.png" mode=""></image>
						<text class="f30 c0">{{item.team_ce}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="tips flex_c">
			<text>提示：排行最多展示前两百人</text>
		</view> -->
		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="puppetList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {powerRanking} from '../../api/index.js'
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				rankingList: [],
				puppetList:[],
				itemobj1:{},
				itemobj2:{},
				itemobj3:{},
			}
		},
		onLoad() {
			this.initList()
		},
		methods: {
			// 用户信息
			initList() {
				let data = {
					page: this.page
				}
				powerRanking(data).then(res => {
					console.log(res)
					if (this.page == 1) {
						this.puppetList = res.data.data
						this.itemobj1 = res.data.data[0]
						this.itemobj2 = res.data.data[1]
						this.itemobj3 = res.data.data[2]
						let list = res.data.data.slice(3, res.data.data.length);
						console.log(list);
						this.rankingList = this.page == 1 ? list : this.rankingList.concat(list);
					} else {
						let list = res.data.data;
						this.rankingList = this.page == 1 ? list : this.rankingList.concat(list);
						console.log(this.rankingList);
						if (list.length < this.size) this.status = 'nomore';
					}
				})
			},
			// 子组件返回
			goTagglePage() {
				uni.redirectTo({
					url: '/pagesMy/fightingCenter/userRanking'
				})
			},
			goPageNext(id) {
				uni.navigateTo({
					url: '/pagesMy/fightingCenter/teamMembers?id=' + id
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
					that.rankingList = [],
					that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	page {
		background: #E0DDDA;
	}
</style>
<style scoped>
	.fighting_box {
		width: 100%;
		margin-top: 150rpx;
	}

	.fighting {
		width: 30%;
		color: #ffffff;
	}

	.fighting_top {
		position: relative;
		margin-bottom: 10rpx;
	}

	.rankings {
		position: absolute;
		top: -60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100rpx;
		height: 100rpx;
	}

	.user_img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin: 12rpx 0;
	}

	.first {
		transform: translateY(-60rpx);
	}
	.zhans{
		margin-right: 20rpx;
	}
	.zhans>image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	.zhan>image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.grade {
		margin: 10rpx 0;
		color: #A7A4AD;
	}

	.ranking_box {
		width: 94%;
		margin: 50rpx 0 0;
	}

	.ranking {
		width: 100%;
		margin: 40rpx 0;
	}

	.ranking>text {
		width: 10%;
		text-align: center;
	}

	.ranking_r {
		width: 90%;
		background: #B8A185;
		padding: 20rpx 0; 
		border-radius: 80rpx;
	}

	.ranking_r>image {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		margin: 0 28rpx;
	}

	.ranking_r_user {
		width: 45%;
		/* background: skyblue; */
	}

	.tips {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 100rpx;
		background: #E0DDDA;
		font-size: 24rpx;
		color: #A6A5AF;
	}

	/deep/ .u-navbar__content__right__text {
		color: #FFFFFF;
		font-size: 24rpx !important;
	}
</style>